Fetch API 구성

Fetch API의 구성은 다음과 같다.

HTTP REQUEST
HTTP RESPONSE
HEADERS
BODY

fetch API 는 Window와 WorkerGlobalScope에서 인스턴스를 생성하지 않고 fetch()와 같이 직접 호출해서 사용한다.
fetch(url, option) 으로 사용된다. 첫 번째 인자는 요청을 보낼 url이며, 두 번째 인자는 요청에 있어서 사용할 통신 옵션이다.

Fetch Request Object

Request 인스턴스를 생성하고 반환한다.

async function getImage(url) {
  const obj = new Request(url, { method: "GET" });
  console.log(obj.url);
  console.log(obj.method);
  const response = await fetch(obj);
  return response.blob();
}

getImage(url).then((blob) => {
  const el = document.querySelector("img");
  el.src = URL.createObjectUrl(blob);
});

new Request(url, option)으로 Request 객체를 생성한다.
옵션을 작성하지 않으면 디폴트 값으로 설정된다.

Request 옵션

Request Object의 옵션은 다음과 같다.

Read Only가 아닌 것은 Request 객체에 옵션으로 설정할 수 있다.

method
- Request Method(GET, POST)등이 담기는 곳
body
- 서버로 보낼 데이터(문자열, FormData, Blob) 등을 작성하는 프로퍼티
keepalive
- 웹 페이지보다 Request가 더 길게 존속하려고 할 때 사용한다.
cache
- Request의 cache 모드
credentials
- Request의 인증 정보, 쿠키 사용 관련
headers
- Request의 headers 오브젝트가 설정되는 곳
mode
- Request 모드, same-origin, cors 설정
redirect
- redirect 취급 방법
referrer
- 현재 페이지를 링크한 이전 address를 담음
referrerPolicy
- Request에 referre 정보를 포함하는 기준
signal
- AbortSignal 오브젝트, Abort 제어
intergrity
- 브라우저가 체크하는 보안 기능, 서브 리소스 정합성(SRI)값이 담긴다.
destination (Read Only)
- Request 리소스 타입, image, worker
isReloadNavigation (Read Only)
- 리로드 네비게이션 Request인지의 여부가 담긴다.
isHistoryNavigation (Read Only)
- 히스토리 네비게이션 Request인지의 여부가 담긴다.

const obj = new Request(url);

console.log(obj.body); //=> undefined
console.log(obj.cache); //=> default
console.log(obj.credentials); //=> same-origin
console.log(obj.headers); //=> { }
console.log(obj.intergrity); //=> ""
console.log(obj.destination); //=> empty
console.log(obj.isReloadNavigation); //=> undefined
console.log(obj.isHistoryNavigation); //=> false

Fetch Response Object

Request에 대한 응답 오브젝트다.
new Resoponse()로 만들 수도 있지만, fetch() 가 끝나면 Response 인스턴스가 반환된다.
async function getImage(url) { const response = await fetch(url); if (response.status === 200) { const blob = await response.blob(); const el = document.querySelector("img"); el.src = URL.createObjectUrl(blob); } } const url = "../../image/something.png"; getImage(url);
1. await fetch()에서 서버 응답이 올 때 까지 대기하고 다음 문장으로 넘어가게 된다.
2. response.status === 200 으로 응답이 성공적이었는지 여부를 확인하고, 성공적이면 아래로 내려간다.
3. blob()이 Promise에서 실행되므로 await를 사용한다.

Response 프로퍼티

error
- 통신 에러 오브젝트
headers
- Response Headers 오브젝트
ok
- Response 성공여부 불린 값 (200~299의 경우 true)
redirect
- Response의 리다이렉트 여부
redirected
- 리다이렉트 URL이 다수인지 여부
status
- HTTP status 코드(200, 404)
statusText
- HTTP 텍스트 status
type
- Response 타입 (basic, cors)
url
- Response URL

async function getImage(url) {
  const res = await fetch(url);

  log(res.error); //=> undefined
  log(res.headers); //=> { }
  log(res.ok); //=> true
  log(res.redirect); //=> undefined
  log(res.redirected); //=> false
  log(res.status); //=> 200
  log(res.statusText); //=> OK
  log(res.type); //=> basic
  log(res.url); //=>
}
getImage("../../image/something.png");

32. Fetch API 구성요소1

Tags

Fetch API 구성

Fetch Request Object

Request 옵션

Fetch Response Object

Response 프로퍼티